<template>
  <div class="hellow-box">
    <section>
      <article>{{ timeTip }}</article>
      <div class="userInfo">
        <p>
          工号：<span>{{ userStore.userInfo.workId }}</span>
        </p>
        <p v-if="userStore.isAdmin === 1">身份：<span>教师、管理员</span></p>
        <p v-else>身份：<span>教 师</span></p>
      </div>
    </section>

    <section class="classTip">
      <div>课程提醒：</div>
      <p v-if="courseTipList.length === 0">今日暂无课程，好好休息吧</p>
      <p v-for="(item, index) in courseTipList" :key="index">{{ item }}</p>
      <!-- <p>19: 00 -- 技术课</p> -->
    </section>

    <section>
      <p>{{ helloTip }}</p>
    </section>
    <i :class="iconClass"></i>
  </div>
</template>

<script setup lang="ts">
import { ElMessage } from 'element-plus';
import { computed, onMounted, ref } from 'vue';
import { useAPI } from '../../../../request/api';
import { useUserStore } from '../../../../store/user';
import { APIData, IAllCourseParams, ICourseTable } from '../../../../type';
const api = useAPI();
const userStore = useUserStore();

const hours = new Date().getHours();
const weekDay = new Date().getDay(); //用于查询当天的课程
const courseTipList = ref([] as string[]);

onMounted(() => {
  getDayCourse();
});

const getDayCourse = async () => {
  let courseTableData = [] as ICourseTable[];
  const params: IAllCourseParams = {
    weekDay: weekDay,
    stage: userStore.currentStage,
    workId: userStore.userInfo.workId,
    department: userStore.currentDepartment,
  };
  const res: APIData = await api.findAllByPost(params, userStore.role, 'courseTable');
  if (res.code === 200) courseTableData = res.data.rows;
  else ElMessage.error(res.message);

  for (const item of courseTableData) {
    courseTipList.value.push(`${courstStartTime[item.orderNum - 1]} -- ${item.courseName}`);
  }
};

const courstStartTime = ['08:00', '08:55', '10:05', '11:00', '14:00', '14:55', '16:05', '17:00', '19:00', '19:55', '20:50'];

const iconClass = computed(() => {
  if (hours >= 6 && hours <= 11) return 'iconfont icon-morning';
  if ((hours >= 12 && hours <= 13) || (hours >= 14 && hours <= 17)) return 'iconfont icon-afternoon';
  if ((hours >= 0 && hours <= 5) || (hours >= 20 && hours <= 24) || (hours >= 18 && hours <= 19)) return 'iconfont icon-night';
});

const helloTip = computed(() => {
  if (hours >= 6 && hours <= 11) return '现在已经早上了，开启美好的一天吧~';
  if (hours >= 12 && hours <= 13) return '现在已经中午了，吃完饭睡个午觉吧~';
  if (hours >= 14 && hours <= 17) return '现在已经下午了，要继续加油哦~';
  if (hours >= 18 && hours <= 19) return '现在已经到下午的饭点了，要去吃饭哟~';
  if ((hours >= 0 && hours <= 5) || (hours >= 20 && hours <= 24)) return '现在已经晚上了，请注意身体哦~';
});

const timeTip = computed(() => {
  if (hours >= 6 && hours <= 11) return `上午好，${userStore.userInfo.name}！`;
  if (hours >= 12 && hours <= 13) return `中午好，${userStore.userInfo.name}！`;
  if (hours >= 14 && hours <= 17) return `下午好，${userStore.userInfo.name}！`;
  if (hours >= 18 && hours <= 19) return `傍晚好，${userStore.userInfo.name}！`;
  if ((hours >= 0 && hours <= 5) || (hours >= 20 && hours <= 24)) return `晚上好，${userStore.userInfo.name}！`;
});
</script>

<style lang="scss" scoped>
@import '../iconCss/index.css';
.hellow-box {
  padding: 16px;
  font-size: 16px;
  height: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;

  i {
    font-size: 150px;
    // opacity: 0.2;
    position: absolute;
    right: 8px;
    top: 16px;
  }

  article {
    font-size: 24px;
    letter-spacing: 2px;
  }

  .userInfo {
    margin-top: 8px;

    p {
      margin-right: 20px;
      display: inline-block;
      span {
        font-weight: bold;
      }
    }
  }

  .classTip {
    letter-spacing: 2px;
    div {
      font-size: 20px;
    }
  }
}
</style>
